<template>
  <!-- 注册界面 -->
  <div class="container">
           <a-page-header
          title="注册"
        />
  <a-form
    id="components-form-demo-normal-login"
    :form="form"
    class="login-form"
    @submit="handleSubmit"
  >
    <a-form-item label="用户名">
      <a-input
        v-decorator="[
          'username',
          { rules: [{ required: true, message: 'Please input your username!' }] },
        ]"
        placeholder="Username"
      >
        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>
    <a-form-item  label="密码" >
      <a-input
        v-decorator="[
          'password',
          { rules: [{ required: true, message: 'Please input your Password!' }] },
        ]"
        type="password"
        placeholder="Password"
      >
        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>
    
    <a-form-item label="账号类型" has-feedback>
          <a-select v-decorator="[
              'role',
              { rules: [{ required: true, message: 'place choice role!' }] },
            ]"
            placeholder="Please select a role">
            <a-select-option value="DOCTOR">
              医护人员
            </a-select-option>
            <a-select-option value="CLIENT">
              普通用户（患者）
            </a-select-option>
          </a-select>
        </a-form-item>
    <a-form-item>
    <a-form-item>
      <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
        <a-button> <a-icon type="upload" /> 认证文件 </a-button>
      </a-upload>
      <a-button
        type="primary"
        :disabled="fileList.length === 0"
        :loading="uploading"
        style="margin-top: 16px"
        @click="handleUpload"
      >
        {{ uploading ? 'Uploading' : 'Start Upload' }}
      </a-button>
    </a-form-item>

      <a-checkbox
        v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
      >
        Remember me
      </a-checkbox>
      <a-button type="primary" html-type="submit" class="login-form-button">
        Register
      </a-button>
      Or
      <a-button type="link" @click="toLogin">
        Login in
      </a-button>
    </a-form-item>

  </a-form>
  </div>
</template>


<script>
import {register} from "@/api/user/user"
import { create } from 'ipfs-http-client'

export default {
  data(){
    return{
      fileList: [],
      uploading: false,
      buffer: null,
      uploadFileHash: "",
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          var param = {}
          param['username'] = values.username
          param['telephone'] = ''
          param['email'] = ''
          param['identify'] = ''
          param['role'] = values.role
          param['executeAccount'] = values.executeAccount
          param['password'] = values.password
          param['credentials'] = this.uploadFileHash
          console.log(param)
          register(param)
          .then(data =>{
            console.log(data)
            if(data.code != 200){
              
              this.$message.error("账号注册出错")
              return
            }
            console.log(data)
            this.$message.success("账号注册完成")
          }
          )
        }
      });
    },
    toLogin(){
        this.$router.push({name:"login"})
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    async handleUpload() {
      // const { fileList } = this;
      // const formData = new FormData();
      // fileList.forEach(file => {
      //   formData.append('files[]', file);
      // });
      this.uploading = true;

      //上传的IPFS服务器路径
      const ipfs = create('http://localhost:5001')
      let result = await ipfs.add(this.fileList[0])
      // console.log(result)
      var src = `http://localhost:5002/ipfs/${result.path}`
      this.uploadFileHash = `${result.path}`;
      this.uploading = false;
      this.$message.success("文件上传完成")
      console.log(this.uploadFileHash)
      // You can use any AJAX library you like
      // reqwest({
      //   url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      //   method: 'post',
      //   processData: false,
      //   data: formData,
      //   success: () => {
      //     this.fileList = [];
      //     this.uploading = false;
      //     this.$message.success('upload successfully.');
      //   },
      //   error: () => {
      //     this.uploading = false;
      //     this.$message.error('upload failed.');
      //   },
      // });
    },
  },
}
</script>

<style lang="less" scoped>
.container{
    margin: auto;
    width: 400px;
    height: 700px;
    padding-top: 20px;
}

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}


</style>